<script>
import * as echarts from 'echarts'
export default {
  name: "lineChart",
  props: {
    chartData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

    }
  },
  mounted() {
    this.initChart()
  },
  watch: {
    chartData: {
      handler(newVal) {
        this.initChart()
      },
      deep: true
    }
  },
  methods:{
    initChart(){
      let myChart = echarts.init(this.$refs.lineChart);
      let xData = this.chartData.map(item => item.label);
      let yData = this.chartData.map(item => item.count);
      let option = {
        backgroundColor: "#f5f9ff",
        grid: {
          left: '5%',
          right: '5%',
          bottom: '15%',
          top: '5%',
        },
        tooltip: {
          trigger: "axis",
        },
        color: ["#78aaf2", "#aed1f7", "#c3dcf8", "#e4f1fc", "#b4c9ef"],
        xAxis: {
          type: "category",
          data: xData,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#d2e0f4",
            },
          },
          axisLabel: {
            color: "#7a869a",
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#e6effc",
            },
          },
          data: yData,
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#7a869a",
          },
        },
        series: [
          {
            data: yData,
            type: "line",
            smooth: true,
            lineStyle: {
              width: 2,
            },
            areaStyle: {
              opacity: 0.2
            },
            symbol: "circle",
            symbolSize: 2,
            itemStyle: {
              borderColor: "#0088ff",
              borderWidth: 1,
            },
          },
        ],
      };
      option && myChart.setOption(option);
      // myChart.resize()
      // myChart.on('resize', () => {
      //   myChart.resize()
      // })
    }
  }
}
</script>

<template>
<div class="lineChart" ref="lineChart">

</div>
</template>

<style scoped lang="scss">
.lineChart{
  width: 100%;
  height: 100%;
}
</style>
